<!-- 药品/耗材收入占比 -->
<template>
    <div id="drugs"></div>
</template>
<script>
import * as echarts from "echarts";
import { getDrugsData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {
            data: ["人民医院", "二院", "中医院", "妇幼保健", "乡镇卫生院"],
        };
    },
    mounted() {
        this.setEcharts();
    },
    methods: {
        //设置echarts
        setEcharts() {
            const data = [{ VALUE1: Mock.Random.integer(1, 100), VALUE2: Mock.Random.integer(1, 100) },
            { VALUE1: Mock.Random.integer(1, 100), VALUE2: Mock.Random.integer(1, 100) },
            { VALUE1: Mock.Random.integer(1, 100), VALUE2: Mock.Random.integer(1, 100) },
            { VALUE1: Mock.Random.integer(1, 100), VALUE2: Mock.Random.integer(1, 100) },
            { VALUE1: Mock.Random.integer(1, 100), VALUE2: Mock.Random.integer(1, 100) }]
            let data1 = [];
            let data2 = [];

            data.forEach((item) => {
                data1.push(
                    // item.VALUE1 ? parseFloat(item.VALUE1.substring(0, item.VALUE1.length - 1)) : 0
                    item.VALUE1
                );
                data2.push(
                    // item.VALUE2 ? parseFloat(item.VALUE2.substring(0, item.VALUE1.length - 1)) : 0
                    item.VALUE2
                );
            });

            let drugs = echarts.init(document.getElementById("drugs"));
            let option = {
                legend: {
                    top: 20,
                    textStyle: {
                        color: "#fff",
                    },
                    data: this.data,
                },
                grid: {
                    left: "2%",
                    right: "0%",
                    bottom: "10%",
                    containLabel: true,
                },
                tooltip: {
                    show: "true",
                    trigger: "item",
                    backgroundColor: "rgba(0,0,0,0.7)", // 背景
                    padding: [8, 10], //内边距
                    extraCssText:
                        "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
                },
                yAxis: {
                    type: "value",
                    name: "(%)",
                    nameTextStyle: {
                        color: "#fff",
                        nameLocation: "start",
                        fontSize: 16,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#363e83",
                        },
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#363e83 ",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                            fontWeight: "normal",
                            fontSize: "16",
                        },
                    },
                },
                xAxis: [
                    {
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#363e83",
                            },
                        },
                        axisLabel: {
                            inside: false,
                            interval: 0,
                            padding: [10, 0, 0, 0],
                            textStyle: {
                                color: "#fff",
                                fontWeight: "normal",
                                fontSize: "16",
                            },
                            // formatter:function(val){
                            //     return val.split("").join("\n")
                            // },
                        },
                        data: this.data,
                    },
                    {
                        type: "category",
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        splitArea: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        data: this.data,
                    },
                ],
                series: [
                    {
                        name: "药品",
                        type: "bar",
                        itemStyle: {
                            normal: {
                                show: true,
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#006ced",
                                        },
                                        {
                                            offset: 1,
                                            color: "#00cfff",
                                        },
                                    ]
                                ),
                                barBorderRadius: 50,
                                borderWidth: 0,
                            },
                        },
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                color: "#fff",
                                fontSize: 16,
                            },
                            formatter: (params) => {
                                return `${params.value}%`;
                            },
                        },
                        zlevel: 2,
                        barWidth: "16%",
                        data: data1,
                    },
                    {
                        name: "耗材",
                        type: "bar",
                        barWidth: "16%",
                        itemStyle: {
                            normal: {
                                show: true,
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#96d668",
                                        },
                                        {
                                            offset: 1,
                                            color: "#01babc",
                                        },
                                    ]
                                ),
                                barBorderRadius: 50,
                                borderWidth: 0,
                            },
                        },
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                color: "#fff",
                                fontSize: 16,
                            },
                            formatter: (params) => {
                                return `${params.value}%`;
                            },
                        },
                        zlevel: 2,
                        barGap: "100%",
                        data: data2,
                    },
                ],
            };
            drugs.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#drugs {
    width: 100%;
    height: 100%;
}
</style>